import { useState, useEffect } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import {
  Image,
  Input,
  Button,
  Avatar,
  Layout,
  Carousel,
  Tabs,
  Table,
  Tag,
  Space,
  Pagination,
  Breadcrumb,
  Row,
  Col,
  List,
  Card,
  Skeleton,
  Divider,
} from 'antd';
import {
  SearchOutlined,
  UserOutlined,
  AppleOutlined,
  AndroidOutlined,
} from '@ant-design/icons';
import '../helpinfo/helpinfo.less';
import _API from './api';
import a from './public/a.png';
import b from './public/b.png';
import c from './public/c.png';
import d from './public/d.png';
import { columns1, data1, columns2, data2 } from '../helpinfo/public/tablist';
import InfiniteScroll from 'react-infinite-scroll-component';
const { Header, Footer, Sider, Content } = Layout;
const { TabPane } = Tabs;

export default function HelpinfoPage() {
  // useEffect(() => {
  //   loadMoreData();
  // }, []);
  useEffect(() => {
    getUser();
    console.log('挂载|数据更新后');
    return () => {
      console.log('销毁|数据更新前');
    };
  });

  const getUser = async () => {
    // const result = await _API.user();
    //console.log(result, 'result');
  };
  return (
    <div className="info_page">
      <div className="header">
        <div className="header_left">
          <Image
            width={50}
            src="https://img2.baidu.com/it/u=2892168039,3046714204&fm=253&fmt=auto&app=138&f=JPG?w=496&h=500"
          />
          <span style={{ color: '#888' }}>自然灾害信息共享平台</span>
        </div>
        <div className="header_right">
          <Input
            placeholder="请输入帖子的标题、正文关键字"
            suffix={<SearchOutlined style={{ fontSize: 16 }} />}
          />
          <Button type="primary" size="middle">
            发布
          </Button>
          <Avatar
            style={{ backgroundColor: '#87d068', width: '50px' }}
            icon={<UserOutlined />}
          />
        </div>
      </div>
      {/* <h1>Home - Page</h1> */}
      <Layout style={{ width: '100vw' }}>
        <Content style={{ width: '100vw', overflow: 'hidden' }}>
          <Row style={{ height: '60vh', overflow: 'hidden' }}>
            <Col span={10} style={{ overflow: 'auto' }}>
              <Scrollbars>
                <Breadcrumb
                  style={{
                    padding: '10px 16px',
                    color: '#f5222d',
                    fontSize: '1.5em',
                  }}
                >
                  <Breadcrumb.Item>河南</Breadcrumb.Item>
                  <Breadcrumb.Item>郑州</Breadcrumb.Item>
                </Breadcrumb>
                <List style={{ margin: '1vw 2vw', color: 'red' }}>
                  <List.Item>
                    <List.Item.Meta
                      avatar={
                        <Avatar src="https://img1.baidu.com/it/u=1888032,3375345803&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" />
                      }
                      title={<a href="https://m.thepaper.cn">澎湃新闻</a>}
                      description={
                        <div style={{ color: '#434343', textAlign: 'justify' }}>
                          @大象新闻
                          8月2日消息，大象新闻记者今天从河南省防汛救灾第十场新闻发布会上了解到，此次严重洪涝灾害，给人民群众生命财产安全造成了巨大损失：郑州市受灾人口173.6万人，市政道路损毁2718处，干线公路损毁1183处，农村道路损毁6181处，受灾农村1126个，倒塌房屋5.28万间，农作物受损139.6万亩、绝收43.8万亩，最新核实直接经济损失532亿元。
                        </div>
                      }
                    />
                  </List.Item>
                  <List.Item>
                    <List.Item.Meta
                      avatar={
                        <Avatar src="https://pic.rmb.bdstatic.com/bjh/user/18ac6e1c0cd4c8a64cfe14322013104b.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=19540" />
                      }
                      title={
                        <a href="https://author.baidu.com/home?from=bjh_article&app_id=1570168240515616">
                          央视新闻
                        </a>
                      }
                      description={
                        <div style={{ color: '#434343', textAlign: 'justify' }}>
                          记者从河南省有关部门获悉，郑州“7·20”特大暴雨灾害发生后，党中央、国务院高度重视，第一时间对防汛救灾、灾害调查等作出部署。河南省公安机关对涉嫌违法犯罪的8名企业人员立案侦查并依法逮捕，河南省纪检监察机关按照干部管理权限，依规依纪依法对灾害中涉嫌违纪违法的89名公职人员进行严肃问责。
                        </div>
                      }
                    />
                  </List.Item>
                </List>
              </Scrollbars>
            </Col>
            <Col span={14}>
              <div>
                <Carousel autoplay>
                  <img src={a} alt="" />
                  <img src={b} alt="" />
                  <img src={c} alt="" />
                  <img src={d} alt="" />
                </Carousel>
              </div>
            </Col>
          </Row>
          <div
            style={{
              backgroundColor: '#85a5ff',
            }}
          >
            <div>
              <Button
                type="primary"
                size="large"
                style={{
                  margin: '2vw 0 2vw 6vw',
                  backgroundColor: '#f5222d',
                }}
              >
                请求救援！
              </Button>
              <Button
                type="primary"
                size="large"
                style={{
                  margin: '2vw 0 2vw 30vw',
                  backgroundColor: '#f5222d',
                }}
              >
                捐款！
              </Button>
              <Button
                type="primary"
                size="large"
                style={{
                  margin: '2vw 0 2vw 30vw',
                  backgroundColor: '#f5222d',
                }}
              >
                提供支援！
              </Button>
            </div>
            <Table
              columns={columns1}
              dataSource={data1}
              style={{ padding: '0 2vw 0' }}
            />
          </div>
        </Content>

        <Footer
          style={{
            background:
              'linear-gradient(to right, rgb(189, 195, 199), rgb(44, 62, 80))',
          }}
        >
          青训营第二届: 我们就是队 ----- 自然灾害信息共享平台
        </Footer>
      </Layout>
    </div>
  );
}
